import React, {useEffect, useState} from 'react'
import {
    Button,
    Input,
    Space,
    Popover,
    Popconfirm,
    message
} from "antd";
import {AlignRightOutlined} from '@ant-design/icons'
import {withRouter} from 'react-router-dom'
import axios from 'axios';

import SearchTag from "./SearchTag";
import axiosConfig from '../../utils/axios.config'

import './index.css';


//创建文章卡片
const ArticleCol = (props)=>{

    const {item,editArticle,deleteArticle} = props
    const link = `http://81.68.131.25/post?title=${item.title}&id=${item.id}`
    return (
        <div className="article-box-col" >
            <div className='article-box-col-title'>
                {item.title}
            </div>
            <div className='article-box-col-message'>
                <div className="article-box-col-message-time">
                    {item.time}
                </div>
                <div className="article-box-col-message-tags">
                    <div>
                        {item.tags[0]}
                    </div>
                    <div>
                        {item.tags[1]}
                    </div>
                </div>
            </div>
            <Popover content={
                (
                    <div>
                        <Button onClick={()=>{editArticle(item.id,item.title)}}>编辑</Button>
                        <br/>
                        <hr/>
                        <Popconfirm
                            title={"你确定要删除这篇文章吗?"}
                            okText="Yes"
                            cancelText="No"
                            onConfirm={()=>{deleteArticle(item.id,item.title)}}
                        >
                            <Button>删除</Button>
                        </Popconfirm>
                        <br/>
                        <hr/>
                        <Button href={link} target={"_blank"}> 查看 </Button>
                    </div>
                )
            } placement="bottom"  trigger="click">
                <div className="article-box-col-function-btn">
                    <AlignRightOutlined/>
                </div>
            </Popover>
        </div>
    )
}

let articleList = null

//文章展示组件
function Article(props) {


    const {history} = props
    const [currentArticleList,setCurrentArticleList] = useState([])

    const getArticleList = ()=>{
        console.log(axiosConfig.baseURL)
        let url = axiosConfig.baseURL+'/article/getArticleList'
        axios({
            url:url,
            method:'GET'
        }).then((response)=>{
            articleList = response.data.articleList
            setCurrentArticleList(articleList)
            // console.log(response.data)
        }).catch((err)=>{
            console.log(err)
        })
    }

    useEffect(()=>{
        getArticleList()
    },[]);

    function toArticleWriteComponent(){
        history.push('/articleEditor?behave=createArticle')
    }

    function toArticleEditorComponent(id,title){
        history.push(`/articleEditor?behave=editArticle/${id}/${title}`)
    }

    function deleteArticle(id,title){
        let url = axiosConfig.baseURL+'/article/deleteArticle';
        const key = 'deleteMessage';
        message.loading({content:'操作中...',key})
        axios({
            url:url,
            method:'GET',
            params:{
                id:id+'',
                title:title
            }
        }).then(response=>{
            if(response.data.code&&response.data.code==1&&response.data.message==='成功'){
                message.success({content:'删除成功',key})
                setCurrentArticleList(
                    currentArticleList.filter(item=>{
                        return item.id!==id
                    })
                )
            }else {
                message.warn({content:'删除失败',key})
            }
        }).catch(error=>{
            message.warn({content:'删除失败',key})
            console.log(error)
        })
    }

    function searchArticle(value){
        if(value==='') setCurrentArticleList(articleList)
        else {
            setCurrentArticleList(
                articleList.filter(item=>{
                    return item.title.includes(value)
                })
            )
        }
    }

    return (
    <div className='article-box'>
      <div className="article-box-head">
        <Space>
          <Button  type="primary" onClick={toArticleWriteComponent}>写文章</Button>
          <Input onChange={(e)=>{searchArticle(e.target.value)}}  style={{width:'400px'}} placeholder={'搜索文章'}/>
            <div className='article-search-by-tag'>
                <SearchTag/>
            </div>
        </Space>
      </div>
      <main className="article-box-main-content">
          {
              currentArticleList.map((item)=>{
                  return (
                      <ArticleCol
                          key={item.id}
                          item={item}
                          editArticle={toArticleEditorComponent}
                          deleteArticle={deleteArticle}
                      />
                  )
              })
          }
      </main>
    </div>
  )
}


export default withRouter(Article)